<template>
  <div class="hello">
    <div class="border-bottom">
      <sjx_Header/>
    </div>
    <div 
      :style="bannerStyle" 
      class="banner relative">
      <div class="login-wrap">
        <div class="left">
          <div class="form full-height">
            <el-form 
              v-if="loginVisible"
              ref="form"
              :model="form" 
              class="full-height flex flex-col flex-justify-around" 
              label-position="top">
              <el-form-item 
                prop="phone">
                <el-input 
                  v-model="form.phone" 
                  :minlength="9" 
                  :maxlength="15" 
                  placeholder="Số điện thoại di động"
                  type="tel"/>
              </el-form-item>
              <el-form-item 
                prop="password">
                <el-input 
                  v-model="form.password" 
                  placeholder="Mật mã đăng kí đăng nhập" 
                  type="password"/>
                <div class="forget"><span @click="changeForm('form')">Quên mật mã</span></div>
              </el-form-item>
              <el-form-item class="text-center">
                <el-button 
                  type="primary" 
                  class="grey-9-bg"
                  @click="submit('form')">Kiểm tra thanh toán</el-button>
              </el-form-item>
            </el-form>
            <el-form 
              v-else
              ref="registerForm"
              :model="registerForm" 
              class="full-height flex flex-col flex-justify-around" 
              label-position="top">
              <el-form-item 
                prop="phone">
                <el-input 
                  v-model="registerForm.phone" 
                  :minlength="9" 
                  :maxlength="15" 
                  placeholder="Số điện thoại vay tiền"
                  type="tel"/>
              </el-form-item>
              <el-form-item 
                prop="verifyCode">
                <el-col :span="15">
                  <el-input 
                    v-model="registerForm.verifyCode"
                    :maxlength="4" 
                    type="number" 
                    placeholder="Mã xác minh đăng nhập"
                    style="width: 100%;"/>
                </el-col>
                <el-col :span="8">
                  <div
                    v-show="show"
                    class="verify"
                    @click="sendVerify()">Nhập mã xác minh</div>
                  <div 
                    v-show="!show" 
                    :disabled="true"
                    class="verify">{{ count }} s</div>
                </el-col>
              </el-form-item>
              <el-form-item 
                prop="password">
                <el-input 
                  v-model="registerForm.password" 
                  :maxlength="12" 
                  placeholder="Mời nhập mật mã" 
                  type="password"/>
                <p style="padding-left: 10px;color: #BFBFBF">Mật mã gồm 6~12 kí tự bao gồm chữ in hoa và số</p>
              </el-form-item>
              <el-form-item 
                prop="secondPwd">
                <el-input 
                  v-model="registerForm.secondPwd" 
                  :maxlength="12" 
                  placeholder="Mời nhập lại mật mã" 
                  type="password"/>
              </el-form-item>
              <el-form-item class="text-center">
                <el-button 
                  type="primary" 
                  class="grey-9-bg"
                  @click="submitRegister('registerForm')">Xác nhận</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="right formForPC">
          <div v-if="Boolean(orderInfo)" >
            <div class="form_info_title flex flex-align-center">
              <img 
                class="margin-right"
                src="../static/img/icon1.png" 
                alt="">
              <h3>Thông tin thanh toán</h3>
            </div>
            <div
              class="form_info_content">
              <div class="userInfo">
                <div class="form_line_wrap">
                  <div class="form_info_item">
                    <p>Số điện thoại vay tiền</p>
                    <span>{{ orderInfo.userPhone }}</span>
                  </div>
                  <div class="form_info_item">
                    <p>Danh sách khách hàng</p>
                    <span>{{ orderInfo.userName }}</span>
                  </div>
                  <div class="form_info_item">
                    <p>Số CMND Khách hàng</p>
                    <span>{{ orderInfo.idCard }}</span>
                  </div>
                </div>
                <div class="form_line_wrap">
                  <div class="form_info_item">
                    <p>Khoản tiền vay</p>
                    <span>{{ orderInfo.loanAmount }}</span>
                  </div>
                  <div class="form_info_item">
                    <p>Thời hạn vay</p>
                    <span>{{ orderInfo.productPeriod }}</span>
                  </div>
                  <div class="form_info_item">
                    <p>Thời gian yêu cầu</p>
                    <span>{{ orderInfo.strCreateTime.split(' ')[0] }}</span>
                  </div>
                </div>
                <div class="form_line_wrap">
                  <div class="form_info_item">
                    <p>Thời gian giải ngân</p>
                    <span>{{ orderInfo.strLoanTime.split(' ')[0] }}</span>
                  </div>
                </div>
              </div>
              <div class="orderInfo">
                <div class="form_line_wrap">
                  <div class="form_info_item">
                    <p>Số tiền nên thanh toán</p>
                    <span>{{ orderInfo.returnMoney }}</span>
                  </div>
                  <div class="form_info_item">
                    <p>Thời gian nên thanh toán</p>
                    <span>{{ orderInfo.strMustRefundTime.split(' ')[0] }}</span>
                  </div>
                  <div class="form_info_item">
                    <p>Số ngày quá hạn</p>
                    <span>{{ orderInfo.overdueDays }}</span>
                  </div>
                </div>
                <div class="form_line_wrap">
                  <div class="form_info_item">
                    <p>Phí quá hạn</p>
                    <span>{{ orderInfo.overdueInterest }}</span>
                  </div>
                  <div class="form_info_item">
                    <p>Số tiền đã trả</p>
                    <span>{{ orderInfo.refundAmount }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div 
            v-else
            class="none">
            <div class="text-center none-content">
              <img 
                :src="require('../static/img/'+pageImg+'.png')" 
                
                alt="">
              <p>{{ pageMsg }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="formForM">
      <div class="right">
        <div v-if="Boolean(orderInfo)" >
          <div class="form_info_title flex flex-align-center">
            <img 
              class="margin-right"
              src="../static/img/icon1.png" 
              alt="">
            <h3>Thông tin chi trả</h3>
          </div>
          <div
            class="form_info_content">
            <div class="userInfo">
              <div class="form_info_item">
                <p>Số điện thoại vay tiền</p>
                <span>{{ orderInfo.userPhone }}</span>
              </div>
              <div class="form_info_item">
                <p>Danh sách khách hàng</p>
                <span>{{ orderInfo.userName }}</span>
              </div>
              <div class="form_info_item">
                <p>Số CMND Khách hàng</p>
                <span>{{ orderInfo.idCard }}</span>
              </div>
              <div class="form_info_item">
                <p>Khoản tiền vay</p>
                <span>{{ orderInfo.loanAmount }}</span>
              </div>
              <div class="form_info_item">
                <p>Thời hạn vay</p>
                <span>{{ orderInfo.productPeriod }}</span>
              </div>
              <div class="form_info_item">
                <p>Thời gian yêu cầu</p>
                <span>{{ orderInfo.strCreateTime.split(' ')[0] }}</span>
              </div>
              <div class="form_info_item">
                <p>Thời gian giải ngân</p>
                <span>{{ orderInfo.strLoanTime.split(' ')[0] }}</span>
              </div>
            </div>
            <div class="orderInfo">
              <div class="form_info_item">
                <p>Số tiền nên thanh toán</p>
                <span>{{ orderInfo.returnMoney }}</span>
              </div>
              <div class="form_info_item">
                <p>Thời gian nên thanh toán</p>
                <span>{{ orderInfo.strMustRefundTime.split(' ')[0] }}</span>
              </div>
              <div class="form_info_item">
                <p>Số ngày quá hạn</p>
                <span>{{ orderInfo.overdueDays }}</span>
              </div>
              <div class="form_info_item">
                <p>Phí quá hạn</p>
                <span>{{ orderInfo.overdueInterest }}</span>
              </div>
              <div class="form_info_item">
                <p>Số tiền đã trả</p>
                <span>{{ orderInfo.refundAmount }}</span>
              </div>
            </div>
          </div>
        </div>
        <div 
          v-else
          class="none">
          <div class="text-center none-content">
            <img 
              :src="require('../static/img/'+pageImg+'.png')" 
              
              alt="">
            <p>{{ pageMsg }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="body">
      <div class="body-main">
        <div class="full-width flex flex-justify-center flex-align-center">
          <img 
            class="margin-right"
            src="../static/img/icon2.png" 
            alt="">
          <h3 class="body-main-title">Khách hàng có thể hoàn trả theo các cách sau</h3>
        </div>
        <div class="content full-width flex flex-wrap flex-justify-between">
          <div class="item">
            <p class="item-title">Ngân hàng BIDV</p>
            <div class="item-content">
              <p>Tài khoản thanh toán của bạn như sau:</p>
              <p>- Số tài khoản: 12510000526772</p>
              <p>- Tên chủ tài khoản: Công ty Cổ phần Ngân Lượng</p>
              <p>- Ngân hàng: BIDV – Đầu tư và phát triển</p>
              <p>- Chi nhánh: Chi nhánh Đông Đô</p>
              <p>- Nội dung: công ty mydong + sdt khách hàng +  chứng minh nhân dân</p>
              <p>Phần nội dung ghi chú vui lòng điền đúng theo yêu cầu , nếu không làm đúng theo</p>
              <p>hướng dẫn thì công ty MyDong sẽ không chịu trách nhiệm.</p>
            </div>
          </div>
          <div class="item">
            <p class="item-title">Ngân hàng Vietcombank</p>
            <div class="item-content">
              <p>Tài khoản thanh toán của bạn như sau:</p>
              <p>- Số tài khoản: 0541000197891</p>
              <p>- Ngân hàng: Vietcombank - Ngoại thương</p>
              <p>- Chi nhánh: Chi Nhánh Chương Dương - Hà Nội</p>
              <p>- Chi nhánh: Chi nhánh Đông Đô</p>
              <p>- Nội dung: công ty mydong + sdt khách hàng +  chứng minh nhân dân</p>
              <p>Phần nội dung ghi chú vui lòng điền đúng theo yêu cầu , nếu không làm đúng theo hướng</p>
              <p>hướng dẫn thì công ty MyDong sẽ không chịu trách nhiệm.</p>
            </div>
          </div>
          <div class="item">
            <p class="item-title">Ngân hàng Kỹ thương Việt Nam</p>
            <div class="item-content">
              <p>Tài khoản thanh toán của bạn như sau:</p>
              <p>- Số tài khoản: 19126410788041</p>
              <p>- Tên chủ tài khoản: Công ty Cổ phần Ngân Lượng</p>
              <p>- Ngân hàng: Techcombank - Kỹ Thương Việt Nam</p>
              <p>- Chi nhánh: Hà Thành</p>
              <p>- Nội dung: công ty mydong + sdt khách hàng +  chứng minh nhân dân</p>
              <p>Phần nội dung ghi chú vui lòng điền đúng theo yêu cầu , nếu không làm đúng theo hướng</p>
              <p>hướng dẫn thì công ty MyDong sẽ không chịu trách nhiệm.</p>
            </div>
          </div>
          <div class="item">
            <p class="item-title">Ngân hàng Công thương Việt Nam</p>
            <div class="item-content">
              <p>Tài khoản thanh toán của bạn như sau:</p>
              <p>- Số tài khoản: 117002672433</p>
              <p>- Tên chủ tài khoản: Công ty Cổ phần Ngân Lượng</p>
              <p>- Ngân hàng: Vietinbank - Công thương</p>
              <p>- Chi nhánh: Chi Nhánh Hoàng Mai, PGD Trương Định, Hà Nội</p>
              <p>- Nội dung: công ty mydong + sdt khách hàng +  chứng minh nhân dân</p>
              <p>Phần nội dung ghi chú vui lòng điền đúng theo yêu cầu , nếu không làm đúng theo hướng</p>
              <p>hướng dẫn thì công ty MyDong sẽ không chịu trách nhiệm.</p>
            </div>
          </div>
          <div class="item">
            <p class="item-title">Ngân hàng Sài Gòn Thương Tín</p>
            <div class="item-content">
              <p>Tài khoản thanh toán của bạn như sau:</p>
              <p>- Số tài khoản: 020026767068</p>
              <p>- Tên chủ tài khoản: Công ty Cổ phần Ngân Lượng</p>
              <p>- Ngân hàng: Sacombank - Sài Gòn Thương Tín</p>
              <p>- Chi nhánh: Chi nhánh Thủ Đô</p>
              <p>- Nội dung: công ty mydong + sdt khách hàng +  chứng minh nhân dân</p>
              <p>Phần nội dung ghi chú vui lòng điền đúng theo yêu cầu , nếu không làm đúng theo hướng</p>
              <p>hướng dẫn thì công ty MyDong sẽ không chịu trách nhiệm.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template>
      <sjx_Footer/>
    </template>
  </div>
</template>

<script>
import sjx_Header from '../components/header'
import sjx_Footer from '../components/footer'
import base from '../common/fn.js'
// import JsEncrypt from 'jsencrypt/bin/jsencrypt'
export default {
  name: 'Repay',
  components: {
    sjx_Header,
    sjx_Footer
  },
  data() {
    var validatePass = (rule, value, callback) => {
      var reg = /^(?![A-Za-z]+$)(?!\d+$)(?![\W_]+$)\S{6,12}$/
      if (!reg.test(value)) {
        callback(new Error(this.$t('login.passVl1')))
      } else {
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$t('login.passwordtoo')))
      } else if (value !== this.registerForm.password) {
        callback(new Error(this.$t('login.passVl')))
      } else {
        callback()
      }
    }
    return {
      loginVisible: true,
      form: {
        phone: '',
        password: ''
      },
      rules: {
        phone: [
          {
            required: true,
            message: this.$t('login.inputYourPhone'),
            trigger: ['blur']
          }
        ],
        password: [{ validator: validatePass, trigger: 'blur' }]
      },
      registerRules: {
        // phone: [
        //   {
        //     required: true,
        //     message: this.$t('login.inputYourPhone'),
        //     trigger: ['blur']
        //   }
        // ],
        // verifyCode: [{ required: true, trigger: ['blur'] }],
        password: [{ validator: validatePass, trigger: 'blur' }],
        secondPwd: [{ validator: validatePass2, trigger: 'blur' }]
      },
      registerForm: {
        phone: '',
        verifyCode: '',
        password: '',
        secondPwd: ''
      },
      bannerStyle: {
        backgroundImage: 'url(' + require('../static/img/bg-repay.png') + ') ',
        backgroundPosition: 'center center',
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover'
      },
      sessionid: '',
      orderNo: '',
      orderInfo: '',
      count: 60,
      show: true,
      timer: '',
      pageImg: 'notice',
      pageMsg: 'Mời đăng nhập bằng số điện thoại vay tiền để tiến hành kiểm tra'
    }
  },
  // mounted() {
  //   console.log(sessionStorage.getItem('sessionid'))
  //   if (sessionStorage.getItem('sessionid')) {
  //     this.fetchOrderNo()
  //   }
  // },
  methods: {
    submit() {
      // 调用保存信息的接口
      if (this.form.phone && this.form.password) {
        let option1 = {
          header: {
            ...base,
            action: 'U0009VN'
          },
          phone: this.form.phone,
          loginMethod: 1
        }
        this.$axios.$post('', option1).then(res => {
          if (res.header.code === 0) {
            if (res.data.result == 1) {
              this.login()
            } else {
              this.$message.warning(this.$t('no41'))
            }
          } else {
            this.$message.error(res.header.msg)
          }
        })
      } else {
        this.$message.error(this.$t('no40'))
        this.orderInfo = ''
        this.pageImg = 'noinfo'
        this.pageMsg = 'Trước đó không có thông tin thanh toán'
      }
    },
    login() {
      const jse = new JSEncrypt()
      jse.setPublicKey(this.$store.state.publicKey)
      let baseHeader = base
      baseHeader.devicetype = 4
      let option2 = {
        header: {
          ...baseHeader,
          action: 'U0009'
        },
        imei: 'pc',
        termType: 'pc',
        loginMethod: 3,
        phone: this.form.phone,
        password: jse.encrypt(this.form.password)
      }
      this.$axios.$post('', option2).then(res => {
        if (res.header.code === 0) {
          this.sessionid = res.data.sessionid
          this.$store.commit('setSessionid', this.sessionid)
          sessionStorage.setItem('sessionid', this.sessionid)
          this.fetchOrderNo()
        } else {
          this.$message.error(res.header.msg)
          this.pageImg = 'noinfo'
          this.pageMsg = 'Trước đó không có thông tin thanh toán'
          this.orderInfo = ''
        }
      })
    },
    fetchOrderNo() {
      let option = {
        header: {
          ...base,
          action: 'O0001',
          sessionid: sessionStorage.getItem('sessionid')
        }
      }
      this.$axios.$post('', option).then(res => {
        if (res.header.code === 0) {
          if (res.data.length === 0) {
            this.orderInfo = ''
            this.pageImg = 'noinfo'
            this.pageMsg = 'Trước đó không có thông tin thanh toán'
            return false
          }
          if (res.data[0].status >= 43 && res.data[0].status < 51) {
            this.orderNo = res.data[0].orderNo
            this.orderInfo = res.data[0]
          } else {
            this.orderInfo = ''
            this.pageImg = 'noinfo'
            this.pageMsg = 'Trước đó không có thông tin thanh toán'
          }
        } else {
          this.$message.error(res.header.msg)
        }
      })
    },
    changeForm(formName) {
      // this.$refs[formName].resetFields()
      this.loginVisible = false
    },
    sendVerify() {
      if (this.registerForm.phone) {
        let option = {
          header: {
            ...base,
            action: 'M0003'
          },
          phone: this.registerForm.phone,
          newPhone: ''
        }
        this.$axios.$post('', option).then(res => {
          this.loginVisible = false
          if (res.header.code === 0) {
            this.$message.success(this.$t('no43'))
            this.countDown()
          } else {
            this.$message.error(res.header.msg)
          }
        })
      } else {
        this.loginVisible = false
        this.$message.error(this.$t('no42'))
      }
    },
    countDown() {
      const TIME_COUNT = 60
      if (!this.timer) {
        this.count = TIME_COUNT
        this.show = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count -= 1
          } else {
            this.show = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    },
    submitRegister() {
      if (
        this.registerForm.phone &&
        this.registerForm.verifyCode &&
        this.registerForm.password &&
        this.registerForm.secondPwd
      ) {
        var reg = /^(?![A-Za-z]+$)(?!\d+$)(?![\W_]+$)\S{6,12}$/
        if (!reg.test(this.registerForm.password)) {
          this.$message.warning(this.$t('login.passVl1'))
          return false
        }
        if (this.registerForm.password !== this.registerForm.secondPwd) {
          this.$message.warning(this.$t('login.passVl'))
          return false
        }
        const option = {
          header: {
            ...base,
            action: 'U0009VNSMS'
          },
          newPhone: '',
          phone: this.registerForm.phone,
          valCode: this.registerForm.verifyCode
        }
        this.$axios.$post('', option).then(res => {
          if (res.header.code === 0) {
            const jse = new JSEncrypt()
            jse.setPublicKey(this.$store.state.publicKey)
            let option1 = {
              header: {
                ...base,
                action: 'U0012'
              },
              newPhone: '',
              phone: this.registerForm.phone,
              valCode: this.registerForm.verifyCode,
              password: jse.encrypt(this.registerForm.password),
              confirmPassword: jse.encrypt(this.registerForm.secondPwd)
            }
            this.$axios.$post('', option1).then(res => {
              if (res.header.code === 0) {
                this.loginVisible = true
              } else {
                this.$message.error(res.header.msg)
              }
            })
          } else {
            this.$message.error(res.header.msg)
          }
        })
      } else {
        this.$message.error(this.$t('no40'))
      }
    }
  }
}
</script>
<style>
.el-button span {
  color: #fff !important;
}
.el-input__inner {
  height: 60px !important;
}
</style>
<style lang="scss" scoped>
$back: #305bff;
@mixin flex($cen) {
  display: flex;
  justify-content: $cen;
  align-items: center;
}
.body {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.forget {
  padding-bottom: 10px;
  text-align: right;
  span {
    cursor: pointer;
  }
}
.verify {
  text-align: center;
  width: 100%;
  margin-left: 20px;
  background: #00cb5a;
  color: #fff;
  border: none;
  line-height: 44px;
  border-radius: 25px;
  margin-top: 5px;
  cursor: pointer;
}
.full-height {
  height: 100%;
}

@media screen and (min-width: 1200px) {
  .el-button span {
    color: #fff !important;
    font-size: 18px;
  }
  .banner {
    width: 100%;
    height: 100%;
    position: relative;
    height: 770px;
    .login-wrap {
      width: 1180px;
      height: 540px;
      padding: 40px;
      margin-top: 71px;
      background: #fff;
      display: flex;
      .left {
        flex: 2;
        height: 100%;
        border-right: 1px dashed #ccc;
        .title {
          color: #383838;
          margin-top: 0;
        }
      }
      .right {
        height: 100%;
        flex: 3;
        padding: 10px 0 0 40px;
        background: #fff;
        box-sizing: border-box;
      }
    }
  }
  .formForM {
    display: none;
  }
  .form {
    padding-right: 40px;
    box-sizing: border-box;
    h2 {
      font-size: 26px;
      font-weight: 700;
      line-height: 50px;
    }
    .title {
      line-height: 70px;
    }
    .label {
      font-family: ArialMT;
      color: rgba(49, 49, 49, 1);
      line-height: 46px;
      margin-bottom: 12px;
      p {
        color: #313131;
      }
    }
    input.line {
      width: 430px;
      border-bottom: 1px solid #b2b2b2;
      line-height: 35px;
      color: #305bff;
    }
    input.line:focus {
      color: #305bff;
      border-bottom: 1px solid #305bff;
    }
    .cen {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
    }
    .el-button {
      background: #3462ff;
      width: 80%;
      height: 70px;
      background: rgba(52, 98, 255, 1);
      border-radius: 35px;
      box-shadow: 0px 6px 21px rgba(52, 98, 255, 0.82);
      border: none;
    }
    .noteButton {
      width: 27%;
      height: 46px;
      background: #3462ff;
      border-radius: 6px;
      box-shadow: none;
      padding: 0;
    }
    .el-form-item {
      margin-bottom: 20px;
    }
  }
  .right {
    .form_info_title {
      padding-left: 10px;
    }
    .none {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .none-content {
        img {
          margin: 20px;
        }
        p {
          width: 315px;
          font-size: 18px;
        }
      }
    }
    .form_info_content {
      .userInfo,
      .orderInfo {
        padding: 10px;
        .form_line_wrap {
          display: flex;
          padding: 10px;
          .form_info_item {
            flex: 0 1 200px;
            p {
              font-size: 14px;
              color: rgba(123, 123, 123, 1);
              line-height: 30px;
            }
            span {
              font-size: 16px;
              color: rgba(0, 0, 0, 1);
              line-height: 30px;
            }
          }
        }
      }
      .userInfo {
        border-bottom: 1px solid #f1f1f1;
      }
      .orderInfo {
        p,
        span {
          color: #2e5aff !important;
        }
        span {
          font-weight: bold;
        }
      }
    }
  }
  .body-main {
    min-width: 1200px;
    margin: 0 auto;
    padding: 60px 0px;
    .body-main-title {
      font-size: 24px;
      color: rgba(0, 0, 0, 1);
      line-height: 70px;
    }
    .content {
      padding: 20px;
      .item {
        margin: 30px 0 30px 10px;
        flex: 0 0 40%;
        box-sizing: border-box;
        .item-title {
          font-size: 20px;
          color: rgba(63, 104, 255, 1);
          line-height: 70px;
        }
        .item-content {
          font-size: 14px;
          color: rgba(117, 117, 117, 1);
          line-height: 24px;
        }
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .el-button span {
    color: #fff !important;
    font-size: 18px;
  }
  .body-main {
    padding: 30px;
  }
  .banner {
    width: 100%;
    height: 100%;
    position: relative;
    height: 770px;
    .login-wrap {
      width: 80%;
      height: 540px;
      padding: 40px;
      margin-top: 71px;
      background: #fff;
      display: flex;
      .left {
        flex: 2;
        height: 100%;
        .title {
          color: #383838;
          margin-top: 0;
        }
      }
    }
  }
  .formForPC {
    display: none;
  }
  .formForM {
    display: block !important;
    .form {
      width: 70%;
      margin: 0 auto;
      h2 {
        font-size: 20px;
        font-weight: 700;
        line-height: 40px;
      }
      padding: 30px;
      box-sizing: border-box;
      .title {
        line-height: 70px;
      }
      .label {
        font-family: ArialMT;
        color: rgba(49, 49, 49, 1);
        line-height: 46px;
        margin-bottom: 12px;
        p {
          color: #313131;
        }
      }
      input.line {
        width: 430px;
        border-bottom: 1px solid #b2b2b2;
        line-height: 35px;
        color: #305bff;
      }
      input.line:focus {
        color: #305bff;
        border-bottom: 1px solid #305bff;
      }
      .cen {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
      }
      .el-button {
        background: #3462ff;
        width: 60%;
        background: rgba(52, 98, 255, 1);
        border-radius: 35px;
        box-shadow: 0px 6px 21px rgba(52, 98, 255, 0.82);
        border: none;
      }
      .noteButton {
        width: 27%;
        height: 40px;
        background: #3462ff;
        border-radius: 6px;
        box-shadow: none;
        padding: 0;
        // margin-left:6px;
      }
      .el-form-item {
        margin-bottom: 16px;
      }
    }
  }
  .form {
    padding-right: 40px;
    box-sizing: border-box;
    .title {
      line-height: 70px;
    }
    .label {
      font-family: ArialMT;
      color: rgba(49, 49, 49, 1);
      line-height: 46px;
      margin-bottom: 12px;
      p {
        color: #313131;
      }
    }
    input.line {
      width: 430px;
      border-bottom: 1px solid #b2b2b2;
      line-height: 35px;
      color: #305bff;
    }
    input.line:focus {
      color: #305bff;
      border-bottom: 1px solid #305bff;
    }
    .cen {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
    }
    .el-button {
      background: #3462ff;
      width: 80%;
      height: 70px;
      background: rgba(52, 98, 255, 1);
      border-radius: 35px;
      box-shadow: 0px 6px 21px rgba(52, 98, 255, 0.82);
      border: none;
    }
    .el-form-item {
      margin-bottom: 20px;
    }
  }
  .right {
    height: 100%;
    border-bottom: 1px dashed #ccc;
    padding: 20px;
    .form_info_title {
      padding-left: 20px;
    }
    .none {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .none-content {
        img {
          margin: 20px;
        }
        p {
          width: 315px;
          font-size: 18px;
        }
      }
    }
    .form_info_content {
      .userInfo,
      .orderInfo {
        padding: 10px;
        // .form_line_wrap {
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
        .form_info_item {
          flex: 0 1 33%;
          padding: 10px;
          p {
            font-size: 14px;
            color: rgba(123, 123, 123, 1);
            line-height: 30px;
          }
          span {
            font-size: 16px;
            color: rgba(0, 0, 0, 1);
            line-height: 30px;
          }
        }
        // }
      }
      .userInfo {
        border-bottom: 1px solid #f1f1f1;
      }
      .orderInfo {
        p,
        span {
          color: #2e5aff !important;
        }
        span {
          font-weight: bold;
        }
      }
    }
  }
  .body-main {
    min-width: 100%;
    margin: 0 auto;
    .body-main-title {
      font-size: 24px;
      color: rgba(0, 0, 0, 1);
      line-height: 70px;
    }
    .content {
      padding: 20px;
      .item {
        margin: 30px 0;
        flex: 0 0 40%;
        .item-title {
          font-size: 20px;
          color: rgba(63, 104, 255, 1);
          line-height: 70px;
        }
        .item-content {
          font-size: 14px;
          color: rgba(117, 117, 117, 1);
          line-height: 24px;
        }
      }
    }
  }
}
@media only screen and (max-width: 767px) {
  .banner {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 11;

    .login-wrap {
      margin-top: 100px;
      width: 90%;
      background-color: transparent;
      z-index: 999;
      .left {
        width: 100%;
        height: 87%;
        .title {
          color: #fff;
          margin-top: 0;
        }
        .forget {
          span {
            color: #fff;
          }
        }
      }
    }
  }
  .formForM {
    .form {
      border-bottom: 1px dashed;
      h2 {
        font-size: 20px;
        font-weight: 700;
        line-height: 40px;
      }
      padding: 30px;
      box-sizing: border-box;
      .title {
        line-height: 70px;
      }
      .label {
        font-family: ArialMT;
        color: rgba(49, 49, 49, 1);
        line-height: 46px;
        margin-bottom: 12px;
        p {
          color: #313131;
        }
      }
      input.line {
        width: 430px;
        border-bottom: 1px solid #b2b2b2;
        line-height: 35px;
        color: #305bff;
      }
      input.line:focus {
        color: #305bff;
        border-bottom: 1px solid #305bff;
      }
      .cen {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
      }
      .el-button {
        background: #3462ff;
        width: 40%;
        height: 45px;
        background: rgba(52, 98, 255, 1);
        border-radius: 35px;
        box-shadow: 0px 6px 21px rgba(52, 98, 255, 0.82);
        border: none;
        margin-top: 20px;
        font-size: 15px;
      }
      .noteButton {
        width: 27%;
        height: 40px;
        background: #3462ff;
        border-radius: 6px;
        padding: 0;
        font-size: 14px;
        margin-top: 0px;
      }
      .el-form-item__label {
        padding: 0px !important;
      }
      .el-form-item {
        margin-bottom: 16px;
      }
    }
  }
  .right {
    .form_info_title {
      padding: 10px 0 0 20px;
    }
    .none {
      width: 100%;
      height: 450px;
      display: flex;
      justify-content: center;
      align-items: center;
      .none-content {
        img {
          margin: 20px;
        }
        p {
          width: 315px;
          font-size: 18px;
        }
      }
    }
    .form_info_content {
      .userInfo,
      .orderInfo {
        padding: 10px;
        // .form_line_wrap {
        display: flex;
        flex-wrap: wrap;
        .form_info_item {
          padding: 10px;
          flex: 0 1 50%;
          p {
            font-size: 14px;
            color: rgba(123, 123, 123, 1);
            line-height: 30px;
          }
          span {
            font-size: 16px;
            color: rgba(0, 0, 0, 1);
            line-height: 30px;
          }
        }
        // }
      }
      .userInfo {
        border-bottom: 1px solid #f1f1f1;
      }
      .orderInfo {
        p,
        span {
          color: #2e5aff !important;
        }
        span {
          font-weight: bold;
        }
      }
    }
  }
  .body-main {
    width: 100%;
    margin: 0 auto;
    .body-main-title {
      font-size: 14px;
      color: rgba(0, 0, 0, 1);
      line-height: 30px;
    }
    .content {
      padding: 20px;
      .item {
        margin: 30px 0;
        flex: 0 1 100%;
        .item-title {
          font-size: 20px;
          color: rgba(63, 104, 255, 1);
          line-height: 70px;
        }
        .item-content {
          font-size: 14px;
          color: rgba(117, 117, 117, 1);
          line-height: 24px;
        }
      }
    }
  }
}
</style>
